<template>
	<view class="z-paging-box">
		<up-navbar autoBack bgColor="transparent" title="收益明细"></up-navbar>
		<z-paging :paging-style="{'background-color':info?.bg?.bg_color}" ref="paging" v-model="list"
			@query="getOrderList" empty-view-text="暂无明细" empty-view-img="/static/image/share-no.png"
			:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
			<view class="bg">
				<view class="activity-top" :style="backgroundTopStyle"></view>
				<view class="pad-left-right-20 activity-center">
					<view class="activity-text pad-20 mar-top-50 bg-white radius20">
						<up-divider lineColor="#eebc79" text="收益明细"></up-divider>
						<view class="centerY font-26 mar-bottom-20" v-for="item in list" :key="item.id">
							<view class="flex-w">{{item.title}}</view>
							<view class="time">{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}</view>
						</view>
					</view>
				</view>

				<view class="activity-bottom" :style="backgroundBottomStyle"></view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { activityAwardLog, activityDetail } from '@/api/index.js';
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';
	import util from '@/util/share.js';

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/activity/info/info?activity_id=${info.value.id}`,
			activityId: info.value.id
		})
	})

	// 页面参数
	let props = ref({});
	onLoad((option) => {
		props.value = option;
		getActivityDetail(option.activity_id);
	})

	const info = ref({});
	const custom = ref({});

	// top_bg
	const backgroundTopStyle = computed(() => {
		return {
			backgroundImage: `url(${info?.value.bg?.main_top})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
		};
	});

	// bottom_bg
	const backgroundBottomStyle = computed(() => {
		return {
			backgroundImage: `url(${info?.value.bg?.main_bottom})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
		};
	});

	const getActivityDetail = async (activityId) => {
		// 获取详情
		let { data } = await activityDetail({ activity_id: activityId })
		info.value = data.info;
		custom.value = data.custom_data;
	}

	const list = ref([]);
	const paging = ref(null);
	const getOrderList = (page, pageSize) => {
		activityAwardLog({
			page,
			ps: pageSize,
			activity_id: info.value.id
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}
</script>

<style scoped>
	.custom-button {
		background: none;
		/* 取消背景 */
		border: none;
		/* 取消边框 */
		color: inherit;
		/* 继承父元素的文字颜色 */
		font-size: 16px;
		/* 自定义字体大小 */
		padding: 0;
		/* 取消内边距 */
		box-shadow: none;
		text-align: initial;
		outline: none;
		margin: 0;
		position: static;
		line-height: normal;
	}

	.z-paging-box :deep(.zp-empty-view-center) {
		justify-content: start;
	}

	.bg {
		/* background: #eebc79; */
		/* min-height: 100vh; */
	}

	.activity-top {
		width: 100%;
		height: 1205rpx;
		background-size: 100% 100%;
	}

	.activity-text {
		position: relative;
		margin-top: -500rpx;
	}

	.activity-bottom {
		width: 100%;
		height: 315rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: -1;
	}

	.button {
		margin: 0 30rpx;
		width: 200rpx;
		background: white;
		text-align: center;
		font-size: 26rpx;
		padding: 20rpx 30rpx;
		border-radius: 50rpx;
	}

	.activity-center {
		z-index: 2;
	}
</style>